<template>
  <div class="service-request-container">
    <div class="service-header">
      <h2>售后申请</h2>
      <p>选择您需要的服务，我们将为您提供专业的自行车维修保养</p>
    </div>
    
    <el-card class="service-card">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="service-form">
        <el-form-item label="服务项目" prop="serviceType">
          <el-select v-model="form.serviceType" placeholder="请选择服务项目" clearable size="large">
            <el-option 
              v-for="item in serviceItems" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="服务类型" prop="serviceMode">
          <el-radio-group v-model="form.serviceMode" size="large">
            <el-radio :label="1" class="custom-radio">
              <el-icon><Shop /></el-icon> 到店服务
            </el-radio>
            <el-radio :label="2" class="custom-radio">
              <el-icon><House /></el-icon> 上门服务
            </el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="预约时间" prop="appointmentTime">
          <el-date-picker
            v-model="form.appointmentTime"
            type="datetime"
            placeholder="选择日期时间"
            :disabled="!form.serviceType"
            size="large">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item v-if="form.serviceMode === 2" label="上门地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" size="large"></el-input>
        </el-form-item>
        
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="form.contactPerson" placeholder="请输入联系人姓名" size="large"></el-input>
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" size="large"></el-input>
        </el-form-item>
        
        <el-form-item label="问题描述">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="4" 
            placeholder="请简要描述您遇到的问题"
            size="large">
          </el-input>
        </el-form-item>
        
        <el-form-item class="submit-btn-container">
          <el-button 
            type="primary" 
            @click="submitForm" 
            size="large"
            class="submit-btn">
            提交申请
          </el-button>
          <el-button @click="resetForm" size="large">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 成功提示对话框 -->
    <el-dialog :visible.sync="successDialogVisible" title="提交成功" class="success-dialog">
      <template #content>
        <div class="dialog-content">
          <div class="success-animation">
            <el-icon class="success-icon">
              <CircleCheck />
            </el-icon>
          </div>
          <h3>申请提交成功！</h3>
          <p>您的服务单号：<span class="service-number">{{ serviceNumber }}</span></p>
          <p>我们将在24小时内与您联系确认</p>
        </div>
      </template>
      <template #footer>
        <el-button @click="successDialogVisible = false" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { CircleCheck, Shop, House } from '@element-plus/icons-vue'

const formRef = ref(null)
const form = reactive({
  serviceType: '',
  serviceMode: 1,
  appointmentTime: null,
  address: '',
  contactPerson: '',
  phone: '',
  description: ''
})

const rules = reactive({
  serviceType: [
    { required: true, message: '请选择服务项目', trigger: 'change' }
  ],
  appointmentTime: [
    { required: true, message: '请选择预约时间', trigger: 'change' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
})

const serviceItems = ref([
  { value: 'installation', label: '整车安装' },
  { value: 'adjustment', label: '变速器调节' },
  { value: 'brake', label: '刹车系统维修' },
  { value: 'clean', label: '深度清洁保养' },
  { value: 'tire', label: '轮胎更换' },
  { value: 'noise', label: '异响查询' },
  { value: 'other', label: '其他服务' }
])

const successDialogVisible = ref(false)
const serviceNumber = ref('')

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 模拟提交到服务器
      console.log('表单数据', form)
      
      // 生成随机服务单号
      serviceNumber.value = 'S' + Date.now().toString().slice(-8)
      
      // 显示成功对话框
      successDialogVisible.value = true
      
      // 重置表单
      resetForm()
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
  form.serviceMode = 1
  form.description = ''
}

// 添加动画效果
onMounted(() => {
  nextTick(() => {
    const cards = document.querySelectorAll('.service-card')
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.classList.add('fade-in')
      }, 100 * index)
    })
  })
})
</script>

<style scoped>
.service-request-container {
  padding: 30px;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  /* 背景图片样式 */
  background-image: url('D:\my-test_one\src\assets\img\examine.jpg'); /* 替换为你的图片地址 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.service-request-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  z-index: 1;
}

.service-header,
.service-card,
.success-dialog {
  position: relative;
  z-index: 2; /* 确保内容层在遮罩上方 */
}

.service-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease forwards;
}

.service-header h2 {
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 10px;
}

.service-header p {
  color: #ffffff;
  font-size: 16px;
}

.service-card {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  background-color: white; /* 添加卡片白色背景 */
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.service-form {
  padding: 30px; /* 增加表单内边距 */
}

.custom-radio {
  margin-right: 30px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.custom-radio .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.submit-btn-container {
  text-align: center;
  margin-top: 30px;
}

.submit-btn {
  padding: 12px 40px;
  border-radius: 25px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(48, 65, 86, 0.2);
}

.success-dialog .dialog-content {
  text-align: center;
  padding: 30px;
}

.success-animation {
  margin-bottom: 20px;
}

.success-icon {
  color: #67C23A;
  font-size: 64px;
  display: inline-block;
  animation: scaleIn 0.5s ease forwards;
}

.service-number {
  font-weight: bold;
  color: #304156;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  70% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
</style>